<template>
    <div class="study-report">
        <div class="report-tabs">
            <li v-for="(item,index) in tabsList" :key="index" @click="handleTabsClick(item, index)" :class="currentIndex === index ? 'active' : ''">
                {{ item.name }}
            </li>
        </div>
        <div class="report-box" v-if="!isPersonal && !isClick">
            <div class="report-search">
                <a-input-search
                    placeholder="输入关键词搜索"
                    enter-button="搜索"
                    style="width: 350px"
                    @search="onSearch"
                />
            </div>
            <div class="table-box" >
                <a-table :columns="columns" :data-source="tableData" :rowKey="(row, index) => {return index;}" bordered>
                    <a slot="name"></a>
                    <template slot="operation" slot-scope="text, record">
                        <a class="actionBtn" @click="() => toClassReport(record)">查看报告</a>
                    </template>
                </a-table>
            </div>
        </div>
        <PersonReport v-if="isPersonal && currentTab === 'personal'"></PersonReport>
        <StudyReport v-if="currentTab === 'student' && isClick" :port="'teacher'" :studentNum="studentNo"></StudyReport>
    </div>
</template>
<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
  },
  {
    title: '学校',
    dataIndex: 'school_name',
    key: 'school_name',
  },
  {
    title: '学籍号',
    dataIndex: 'no',
    key: 'no',
  },
  {
    title: '学生姓名',
    key: 'name',
    dataIndex: 'name',
  },
  {
    title: '班级名称',
    key: 'banji_name',
    dataIndex: 'banji_name',
  },
  {
    title: '创建时间',
    key: 'create_time_text',
    dataIndex: 'create_time_text',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];

import PersonReport from './personReport.vue';
import StudyReport from '../../courseCenter/components/studyReport'
export default {
    name: 'studyReport',
    components: { PersonReport, StudyReport },
    data() {
        return {
            currentIndex: 0,
            currentTab: 'student',
            isClick: false,
            tabsList: [
                {
                    name: '学生报告',
                    type: 'student'
                },
                {
                    name: '个人报告',
                    type: 'personal'
                }
            ],
            tableData: [],
            columns,
            isPersonal: false,
            studentNo: ''
        }
    },
    mounted() {
        this.getReportList();
    },
    methods: {
        onSearch(value) {
            console.log(value);
        },
        async getReportList() {
            const res = await this.$request.get('api/report/student_list');
            console.log(res, 'res===');
            if (res.code == 1) {
                res.data.data.forEach((item, index) => {
                    item.index = index + 1;
                });
                this.tableData = res.data.data;
            }
        },
        handleTabsClick(item, index) {
            this.currentIndex = index;
            this.currentTab = item.type;
            this.isClick = false;
            if (item.type === 'personal') {
                this.isPersonal = true;
            } else {
                this.isPersonal = false;
            }
        },
        toClassReport(record) {
            console.log(record, 'record===');
            this.studentNo = record.no;
            this.isClick = true;
        }
    },
    created() {

    }
}
</script>
<style lang="less" scoped>
.study-report{
    width: 100%;
    .report-tabs{
        display: flex;
        // margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #E9E6F2;
        cursor: pointer;
        margin-bottom: 20px;
        li{
            list-style: none;
            width: 170px;
            height: 56px;
            background: #EDF5FF;
            border-radius: 8px;
            border: 1px solid #78A9FF;
            line-height: 56px;
            font-weight: 400;
            font-size: 17px;
            color: #0080FF;
            text-align: center;
            margin-right: 10px;
            &.active{
                background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                color: #FFFFFF;
            }
        }
    }
    .report-search{
        text-align: left;
        margin-top: 30px
    }
    .table-box{
        margin-top: 30px;
    }
}
</style>